<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分析生命周期</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
$destroy销毁了什么？
    1.vm并没有销毁，销毁的是vm上的一些功能
    2.销毁后借助Vue开发者工具看不到任何信息。
    3.之前绑定的事件还在不在？———— 在。
    4.DOM Listener还在不在？———— 在。
    5.Data Binding在不在？ ———— 不在。
    6.自定义事件在不在？———— 不在。
    7.watcher还在不在？ ———— 不在。
-->
<div id="root">
    <h2 class="h2">当前求和为{{sum}}</h2>
    <button @click="add">点我+1</button>
    <button @click="death">销毁</button>
    <input type="text" v-model="name">
</div>
<script type="text/javascript">
    Vue.config.productionTip = false//禁止提示生产提示
    new Vue({
        el: "#root",
        data() {
            return {
                sum: 0,
                name: 'lili'
            }
        },
        methods: {
            add() {
                console.log('有人点了+按钮了')
                this.sum += 1
            },
            death() {
                this.$destroy()//销毁之后 方法不管用了 点击按钮+1 实现不了功能
                console.log('vm销毁了')
            }
        },
        watch:{
            sum(){
                console.log('sum被修改了')
            }
        },
        //初始化之前(创建之前) 无法通过vm获取data中的数据 和methods中的方法
        beforeCreate(){
            console.log('beforeCreate')
            // debugger;
        },
        //初始化完毕(创建完毕) 通过vm获取data中的数据和methods中的方法
        created(){
            console.log('created')
            // console.log(this)
        },
        //挂载之前 所有对DOM节点的操作,都不奏效 无法获得解析后的DOM 因为还没有挂载mount
        beforeMount(){
            console.log('beforeMount')
        },
        //挂载完毕 此时可以操作DOM节点 组件已经脱离初始化阶段 来到运行阶段,
        // 一般在此阶段 设置定时器 发送axios请求
        mounted(){
            console.log('mounted')
        },
        //将要销毁 vm中的data methods 指令等都有效 一般 关闭定时器 取消订阅等收尾工作
        beforeDestroy() {
            console.log('beforeDestroy')
        },
        //销毁了 这个用的比较少
        destroyed(){
            console.log('destroyed')
            window.a=this
        },
        //将要更新 数据是新的,但是页面是旧的 页面尚未和数据保持同步
        beforeUpdate(){
            const h2=document.querySelector(".h2")
            console.log(h2.innerHTML)
            debugger
        },
        //更新完毕 数据是新的 页面也是新的 即 页面和数据保持同步了
        updated(){
            const h2 = document.getElementById('h2')
            console.log('updated')
            console.log('数据',this.sum)
            console.log(h2.innerText)
            debugger;
        }
    })
</script>
</body>
</html>